<template>
    <div>
        <el-dialog title="编辑维保配置" :visible.sync="dialogVisible" width="550px" :before-close="closeAddDialog"
            :close-on-click-modal="false">
            <el-form :model="editData" :rules="rules" ref="refAddForm" label-width="120px">
                <el-form-item size="small" label="维保组" prop="name">
                    <el-input clearable v-model.trim="editData.name" placeholder="请输入维保组名称" maxlength="20"
                        style="width: 100%">
                    </el-input>
                </el-form-item>

                <!-- <el-form-item size="small" label="组织机构" prop="orgId">
                    <el-select size="small" style="width: 100%;" @keyup.enter.native='searchList' v-loadMore="loadMore"
                        v-model='editData.orgName' placeholder='请选择组织' @change="orgIdChange" disabled>
                        <el-option v-for='item in projectList' :label='item.orgName' :value='item.id' :key='item.id'>
                        </el-option>
                        <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
                    </el-select>
                </el-form-item> -->

                <el-form-item size="small" label="维保组织联系人" prop="userId">
                    <!-- <div style="display: flex;justify-content: space-between;">
                        <el-input disabled v-model.trim="editData.name" placeholder="名称" maxlength="20" style="width: 150px">
                        </el-input>
                        <el-input disabled v-model.trim="editData.name" placeholder="联系电话" maxlength="20"
                            style="width: 150px">
                        </el-input>
                        <el-button size="small" type="primary" @click="addSubmit">关联用户</el-button>
                    </div> -->

                    <el-select v-model="editData.userId" filterable placeholder="请选择维保组织联系人" style="width: 100%" :disabled="this.user.roleName=='ORG_ADMIN'">
                        <el-option v-for="item in dataList" :key="item.id" :label="item.nickname + '：' + item.mobile"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item size="small" label="维保技工" prop="userIdList">
                    <div style="display: flex;justify-content: space-between;">
                        <el-input disabled :value="editData.userIdList.length == 0 ? '' : `已选择${editData.userIdList.length}个维修技工`"
                            placeholder="请选择维保技工" maxlength="20" style="width: 100%;margin-right: 20px;">
                        </el-input>
                        <el-button size="small" type="primary" @click="addUserId">选择</el-button>
                    </div>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="addSubmit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>

        <addUserId ref="refaddUserId" :dataList="dataList" :userIdList="editData.userIdList" @clickList="clickList" ></addUserId>
    </div>
</template>
  
<script>
import { reqOrgUserList, reqMaintenanceUpdate, reqOrgList ,reqMaintenance} from "@api/api";
import { mapState } from "vuex";
import addUserId from './addUserId.vue'
import loadMore from "@mixin/loadMore";

export default {
    props:['editData'],
    mixins: [loadMore],
    components: { addUserId },
    data() {
        return {
            dialogVisible: false,
            // 表单验证规则
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入维保组名称",
                        trigger: "blur",
                    },
                ],
                orgId: [
                    {
                        required: true,
                        message: "请选择组织机构",
                        trigger: ["blur", "change"],
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择维保组织联系人",
                        trigger: ["blur", "change"],
                    },
                ],
                userIdList: [
                    {
                        required: true,
                        message: "请选择维保技工",
                        trigger: ["blur", "change"],
                    },
                ],
            },
            dataList: [],

            projectList: [], //组织数据
            sysInstanceIndex: 1,
            sysInstanceTotalPages: 10,
            loading: false,
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch:{
        dialogVisible(e){
            if(e){
                this.OrgUserList()
            }
        }
    },
    methods: {
        addUserId() {
            this.$refs.refaddUserId.innerVisible = true;
        },
        // 维保技工
        clickList(e) {
            this.editData.userIdList = e;
        },
        // 组织切换
        orgIdChange(e) {
            this.editData.orgId = e
            this.editData.userIdList = []
            this.editData.userId = ''
            this.OrgUserList()
        },

        async loadMore() {
            if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
            this.sysInstanceIndex++
            this.loading = true;
            // 获取列表数据的方法
            await this.OrgList()
            this.loading = false;
        },
        // 获取组织列表
        async OrgList(flag) {
            var res = await reqOrgList({
                userId: this.user.userId,
                roleName: this.user.roleName,
                tenantId: this.user.tenantId,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            if (flag) {
                this.editData.orgId = res.data.rows[0].id || "";
            }
            this.projectList =res.data.rows
            this.OrgUserList()
        },
        async OrgUserList() {
            const res = await reqOrgUserList(1, 99, {
                orgId: this.editData.orgId,
                userId: this.user.userId,
                roleName: this.user.roleName,
                username: "",
                mobile: "",
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.dataList = res.data.rows;
        },

        // 查询维保组技工
        async Maintenance(id){
            const res=await reqMaintenance(id)
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.editData.userIdList=res.data.rows.map(item=>item.userId)
        },
        // 点击新增
        addSubmit() {
            this.$refs.refAddForm.validate(async (valid) => {
                if (!valid) return;
                const res = await reqMaintenanceUpdate({
                    id:this.editData.id,
                    name:this.editData.name,
                    orgId:this.editData.orgId,
                    userId:this.editData.userId,
                    userIdList:this.editData.userIdList,
                });
                if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                this.$modal.notifySuccess("编辑维保配置成功");
                this.closeAddDialog()
                this.$parent.getDataList()
            });
        },
        // 点击关闭弹框
        closeAddDialog() {
            this.$refs.refAddForm.resetFields();
            this.dialogVisible = false;
            this.projectList= [] //组织数据
            this.sysInstanceIndex= 1
            this.sysInstanceTotalPages= 10
        },
    },
    mounted() {
    },
};
</script>
  
<style lang="less" scoped>
@import url("../../common.less");
</style>
  